<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04-10</title>
<style>
    #list  { width: 400px; border:1px solid black; border-collapse:collapse; }
    #list td, #list th { border:1px solid black;  text-align:center; }
    #list > thead > tr { color:yellow; background-color: purple; }
    [v-cloak] { display: none; }
</style>
</head>
<body>
    <div id="example"  v-cloak>
        <p>
        이름 : <input type="text" v-model="name" v-on:keyup.13="search"
            placeholder="두글자 이상을 입력하세요" />
        </p>
        <table id="list">
            <thead>
                <tr>
                    <th>번호</th><th>이름</th><th>전화번호</th><th>주소</th>
                </tr>
            </thead>
            <tbody id="contacts" >
                <tr v-for="contact in contactlist">
                    <td>{{contact.no}}</td>
                    <td>{{contact.name}}</td>
                    <td>{{contact.tel}}</td>
                    <td>{{contact.address}}</td>
                </tr>
            </tbody>
        </table>
        <div v-show="isProcessing === true">조회중</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el : '#example',
        data : {
            name : "",
            isProcessing : false,
            contactlist : []
        },
        methods : {
            search : function(e) {
                var val = e.target.value;
                if (val.length >= 2) {
                    this.fetchContacts();
                } else {
                    this.contactlist = [];
                }
            },
            fetchContacts : function() {
                this.contactlist = [];
                this.isProcessing = true;
                var url = "http://sample.bmaster.kro.kr/contacts_long/search/" + this.name;
                var vm = this;
                fetch(url)
                    .then(function(response) {
                        return response.json()
                    }).then(function(json) {
                        vm.contactlist = json;
                        vm.isProcessing = false;
                    }).catch(function(ex) {
                        console.log('parsing failed', ex);
                        vm.contactlist = [];
                        vm.isProcessing = false;
                    })

            }
        }
    })
    </script>
</body>
</html>
